﻿<div id="pui_util_panel">
	
</div>
<script>
(function(){
	var dr=new Mui.util.DocsRender({
		renderTo:'pui_util_panel',
		data:{
			title:'Mui.util.Panel',
			superclass:'Mui.util.UI',
			subclass:'Mui.util.Viewer,Mui.util.Tree,Mui.util.Grid',
			desc:'该类提供一个Panel的基础组件，集成自Pui.util.UI，主要的结构如下图：<br/>',
			private:[{
				name:'__eventBus',
				desc:'对象的事件容器',
				type:'object',
				def:'{}'
			},{
				name:'__type',
				desc:'类型，用于对类进行描述',
				type:'string',
				def:'Panel'
			},{
				name:'__constructor',
				desc:'构造函数',
				type:'string',
				def:'Mui.util.Panel'
			}],
			public:[{
				name:'hasTopbar',
				desc:'是否有topbar',
				type:'boolean',
				def:'false'
			},{
				name:'hasBottombar',
				desc:'是否有bottombar',
				type:'boolean',
				def:'false'
			},{
				name:'hasFootbar',
				desc:'是否有footbar',
				type:'boolean',
				def:'false'
			},{
				name:'hasFoot',
				desc:'是否有foot',
				type:'boolean',
				def:'false'
			},{
				name:'hasHeader',
				desc:'是否有header',
				type:'boolean',
				def:'false'
			},{
				name:'hasTitle',
				desc:'是否有title',
				type:'boolean',
				def:'false'
			},{
				name:'hasFoot',
				desc:'是否有hasFoot',
				type:'boolean',
				def:'false'
			},{
				name:'url',
				desc:'当type为url时，用于加载页面的地址，页面将以iframe的形式加载在panel的body中；但type为loader时，用于指定panel使用ajax加载内容的地址；',
				type:'string',
				def:''
			},{
				name:'type',
				desc:'表示panel的内容加载方式，目前支持：<br/>1、html：即以html编码的方式设置panel的内容;<br/>2、url：即以iframe加载url所设置的地址的方式加载内容;<br/>3、loader：即以ajax加载url所指定的页面到body中显示的方式',
				type:'string',
				def:'html'
			},{
				name:'content',
				desc:'在type为html时，该属性指定panel显示的内容，内容为html编码',
				type:'string',
				def:''
			},{
				name:'title',
				desc:'panel的标题',
				type:'string',
				def:''
			},{
				name:'headerBtns',
				desc:'配置头部工具按钮，格式如:[{text:\'关闭\',handler:this.close,scope:this,iconCls:\'pui-headerbtn-close\'}]',
				type:'array',
				def:'undefined'
			},{
				name:'topBars',
				desc:'配置panel的top工具条的按钮，格式如[{text:\'增加\',handler:this.add,scope:this,iconCls:\'pui-topbar-add\'}]',
				type:'array',
				def:'undefined'
			},{
				name:'bottomBars',
				desc:'配置panel的bottom工具条的按钮，格式如[{text:\'保存\',handler:this.save,scope:this,iconCls:\'pui-bottombar-save\'}]',
				type:'array',
				def:'undefined'
			},{
				name:'footBtns',
				desc:'配置底部工具按钮，格式如:[{text:\'取消\',handler:this.cancel,scope:this,iconCls:\'pui-footbtn-cancel\'}]',
				type:'array',
				def:'undefined'
			},{
				name:'height',
				desc:'panel的高度',
				type:'number',
				def:200
			},{
				name:'width',
				desc:'panel的宽度',
				type:'number',
				def:200
			},{
				name:'autoRender',
				desc:'表示是否自动渲染',
				type:'boolean',
				def:true
			},{
				name:'style',
				desc:'作用于panel的渲染容器的样式，支持"margin:10px;width:200px"的文字形式和{margin:\'10px\',width:200}的js json形式',
				type:'string,object',
				def:''
			},{
				name:'icon',
				desc:'panel的标题栏上的图标路径，在使用场景下，使用相对路径是，要保证位置的正确性，推荐使用绝对路径，如果要达到该效果，推荐使用iconCls的设置',
				type:'string',
				def:''
			},{
				name:'iconCls',
				desc:'panel的标题栏的图标样式，以背景图片的形式设置该图标',
				type:'string',
				def:''
			}],
			fn:[
			{
				name:'add(component o,boolean fixed,function cb,scope)',
				desc:'往panel的body区域添加一个控件，支持已经存在的控件添加，该空间将作为panel的子控件',
				param:[{
					name:'o',
					desc:'要添加的子控件对象'
				},{
					name:'fixed',
					desc:'添加的子控件是否填满panel的body区域，如果该值设置为true，但panel的大小发生改变时，子控件将跟随调整大小'
				},{
					name:'cb',
					desc:'添加子控件操作完成后的回调方法，通常执行将子空间的UI元素添加到panel的body中的渲染工作，默认执行o.render()'
				},{
					name:'scope',
					desc:'添加子控件操作完成后的回调方法的执行作用域'
				}],
				ret:''
			},
			{
				name:'getContent()',
				desc:'如果type设置为html，且content属性的值为空，则调用该方法获取设置给body的内容',
				param:[],
				ret:'内容的html代码',
				retType:'string'
			},
			{
				name:'getMainEl()',
				desc:'获取el的下一级的元素，即$(\'#\'+this.id)所表示的Dom元素',
				param:[],
				ret:'$(\'#\'+this.id)所表示的Dom元素',
				retType:'jQuery object'
			},
			{
				name:'getHeaderEl()',
				desc:'获取panel用于表示header的Dom元素',
				param:[],
				ret:'$(\'#\'+this.id+\'_header\')所表示的Dom元素',
				retType:'jQuery object'
			},
			{
				name:'getBodyEl()',
				desc:'获取panel用于表示body的Dom元素',
				param:[],
				ret:'$(\'#\'+this.id+\'_body\')所表示的Dom元素',
				retType:'jQuery object'
			},
			{
				name:'getFootEl()',
				desc:'获取panel用于表示foot的Dom元素',
				param:[],
				ret:'$(\'#\'+this.id+\'_foot\')所表示的Dom元素',
				retType:'jQuery object'
			},
			{
				name:'getTitleEl()',
				desc:'获取panel用于表示title的Dom元素，title元素包含于header中',
				param:[],
				ret:'$(\'#\'+this.id+\'_header_title\')所表示的Dom元素',
				retType:'jQuery object'
			},
			{
				name:'getFootbarEl()',
				desc:'获取panel用于放置foot-bar的dom元素，该元素包含于foot中',
				param:[],
				ret:'$(\'#\'+this.id+\'_foot_bar\')所表示的Dom元素',
				retType:'jQuery object'
			},
			{
				name:'getTopbarEl()',
				desc:'获取panel用于放置top-bar的dom元素，该元素位于header元素的下方',
				ret:'$(\'#\'+this.id+\'_top_bar\')所表示的Dom元素',
				retType:'jQuery object'
			},
			{
				name:'getBottombarEl()',
				desc:'获取panel用于放置bottom-bar的dom元素，该元素位于foot元素的上方',
				ret:'$(\'#\'+this.id+\'_bottom_bar\')所表示的Dom元素',
				retType:'jQuery object'
			},
			{
				name:'getIframeEl()',
				desc:'如果该panel说表示的type类型为url，则自动在panel的body中创建一个iframe元素用于加载指定url属性地址的页面，该方法用于获取这个iframe的jquery的object',
				param:[],
				ret:'$(\'#\'+this.id+\'_ifr\')所表示的Dom元素',
				retType:'jQuery object'
			},
			{
				name:'render()',
				desc:'panel的渲染入口，该方法执行panel的渲染，如果this.getEl()所获取的元素有内容，这为panel设置样式、大小等信息；如果没有内容，则执行默认的渲染动作，包括渲染header、body、foot、topbar、bottombar、footbar等',
				param:[],
				ret:''
			},
			{
				name:'renderHeader()',
				desc:'渲染header的方法，子类可以重写该方法实现个性化的header渲染。主要执行title、header的按钮渲染动作',
				param:[],
				ret:'表示header的Dom元素，jquery类型',
				retType:'jQuery object'
			},
			{
				name:'renderHeader()',
				desc:'渲染header的方法，子类可以重写该方法实现个性化的header渲染。主要执行title、header的按钮渲染动作',
				ret:'表示header的Dom元素，jquery类型',
				retType:'jQuery object'
			},
			{
				name:'renderBody()',
				desc:'渲染body的方法，子类可以重写该方法实现个性化的body渲染，body主要用于panel的内容展示，不同类型type的panel情况的内容加载，例如：<br/>type为html时，body元素加载content或者getContent方法返回的HTML代码内容；<br/>type为url时，body元素内渲染一个iframe元素，并设置该元素的src地址为url属性说配置的地址；<br/>type为loader时，body元素内渲染用ajax方法根据url地址加载来的内容',
				ret:'表示body的Dom元素，jquery类型',
				retType:'jQuery object'
			},
			{
				name:'renderFoot()',
				desc:'渲染foot的方法，子类可以重写该方法实现个性化的foot渲染，foot内放置有footbar功能按钮组',
				ret:'表示foot的Dom元素，jquery类型',
				retType:'jQuery object'
			},
			{
				name:'update(content)',
				desc:'当type为html类型时，用于更新body内容的方法，用content指定的内容替换现有body的内容，content可以为html代码，可以为原生的dom元素和jquery的dom元素',
				param:[{
					name:'content',
					desc:'可以为html代码，可以为原生的dom元素和jquery的dom元素'
				}],
				ret:''
			},
			{
				name:'init()',
				desc:'重写父类的init方法，执行panel的默认样式设定、渲染动作的执行等',
				ret:''
			},
			{
				name:'initComponent()',
				desc:'重写父类的initComponent方法',
				ret:''
			},
			{
				name:'setTitle(string title)',
				param:[{
					name:'title',
					desc:'title的标题文字'
				}],
				desc:'更新panel的title的方法'
			}
			]
		}
	});
})();
</script>